<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://unpkg.com/vue"></script>
    <script>
        window.onload =function(){
            var app4 = new Vue({
                el: '#app-4',
                methods:{
                    addtext:function(){
                        var x={name:this.names,done:false};
                        this.todos.push(x);
                    },
                    switchdel:function(idx){
                        this.todos[idx].done=!this.todos[idx].done;
                    },
                    show: function (ev) {
                        if(ev.keyCode==13){
                            var x={name:this.names,done:false};
                            this.todos.push(x);
                        }
                    }


                },
                data: {
                    names:'',

                    asd:'Todo List',
                    todos:[
                        {name:'吃饭',done:false},
                        {name:'睡觉',done:false},
                        {name:'打怪兽',done:true},
                    ]
                },
                computed:{
                    done:function(){
                        var count=0;
                        for(var i=0;i<this.todos.length;i++){
                            if(this.todos[i].done){
                                count++;
                            }
                        }
                        return count;
                    }
                }

            })
        }
    </script>
    <style>
        .del{text-decoration: line-through}
    </style>
</head>
<body>
<div id="app-4">
    <a style="">{{asd}}</a><br>
    <input type="text" v-model="names" @keydown="show($event)">
    <button v-on:click="addtext">添加</button>
    <div v-for="(todo,idx) in todos">
        <input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(idx)">
        {{idx}}.
        <span v-bind:class="{del: todo.done}">
         {{todo.name}}
        </span>
    </div>
    <a style="">总共{{todos.length}}个项目</a>
    <a>{{done}}个已完成</a>
    <a>{{todos.length-done}}个未完成</a>
</div>
</body>
</html>
